<template>
    <div class="courseInfo">
        <top-bar styleSize="large" :bgImgUrl="bgImgUrl">
            <div class="next" @click="next">
                <span class="iconfont icon-fanhui1" style="font-size: 1.4em; color: #ffffff"></span>
            </div>
            <div class="header">
                <div class="subject">中国建筑史</div>
                <span class="current">未修</span>
            </div>
        </top-bar>
        <div class="container">
            <div class="bg">
                <div class="item">
                    <div class="title">课程简介</div>
                    <span class="text-area">
                        著名中医院大学老师，发表期刊论文37篇，其中第一作者和通讯作者15篇，SCI收录1篇，主持科研课题3项，参与教学科研课题
                        23项，其中国家级7项，讲课方式独特，善于综合运用表格，对比，口诀等多种方式强化个各重。
                    </span>
                </div>
                <div class="item">
                    <div class="title">教师简介</div>
                    <div class="lecturer">
                        <div class="portrait">
                            <img src="../../../assets/images/yishneg.jpg" alt="">
                        </div>
                        <span class="name">龙丹斌</span>
                    </div>
                    <span class="text-area">
                        著名中医院大学老师，发表期刊论文37篇，其中第一作者和通讯作者15篇，SCI收录1篇，主持科研课题3项，参与教学科研课题
                        23项，其中国家级7项，讲课方式独特，善于综合运用表格，对比，口诀等多种方式强化个各重。
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    /*
    * 课程信息
    * */
    import topBar from "@/components/topBar/topBar";
    export default {
        name: "courseInfo",
        data() {
            return {
                bgImgUrl: require('../../../assets/images/xnjd-bg3.jpg')
            }
        },
        methods: {
            next() {
                this.$router.back()
            }
        },
        components: {
            topBar
        }
    }
</script>

<style lang="scss" scoped>
    .courseInfo {
        /*height: 100%;*/
        /*overflow: auto;*/
        text-align: left;
        background-color: white;
        .next {
            color: #343e4c;
            text-align: left;
            height: 36px;
            line-height: 36px;
            padding: 20px;
            .icon {
                width: 1.4em;
                height: 1.4em;
            }
        }
        .header {
            padding: 0 20px;
            color: white;
            .subject {
                font-size: 24px;
                margin-bottom: 10px;
            }
            .current {
                padding-top: 2px;
                display: inline-block;
                text-align: center;
                width: 38px;
                height: 16px;
                line-height: 16px;
                border: 1px solid #9ba2ac;
                border-radius: 4px;
                font-size: 12px;
            }
        }
        .container {
            margin-top: -70px;
            padding: 0 20px;
            .bg {
                padding: 20px;
                border-radius: 8px 8px 0 0;
                background-color: white;
                .item {
                    margin-bottom: 40px;
                    .title {
                        z-index: 1;
                        position: relative;
                        font-weight: 700;
                        padding-bottom: 20px;
                        &::after {
                            content: "";
                            position: absolute;
                            display: inline-block;
                            padding: 5px 36px;
                            border-radius: 3px;
                            background-image: linear-gradient(to right, rgb(255, 255, 255), rgba(49, 110, 219, .8));
                            transform: skew(20deg) rotate(1deg);
                            left: 1px;
                            bottom: 17px;
                            opacity: .8;
                        }
                    }
                }
                .text-area {
                    line-height: 32px;
                    font-size: 14px;
                    color: #5c697b;
                }
                .lecturer {
                    overflow: hidden;
                    .portrait {
                        width: 32px;
                        height: 32px;
                        float: left;
                        margin-right: 6px;
                        border-radius: 50%;
                        overflow: hidden;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .name {
                        float: left;
                        font-size: 16px;
                        height: 32px;
                        line-height: 32px;
                        color: #5c697b;
                        font-weight: 700;
                    }
                }
            }
        }
    }
</style>